import React, { FC, useEffect } from 'react'
import { stateType, connect, ConnectProps, Loading } from "umi"
import { Spin } from 'antd';
//ConnectState 这个相当于整个工程model层state的输出
//ConnectProps Api 可以快速拿到想要的 dispath, match, location 等 API
// function mapstateToProps() { }
// function mapDispatchToProps() { }
interface pageProps extends ConnectProps{
    data:stateType,
    loading:any
}
const Product:FC<pageProps> = function ({data,loading,dispatch}){
    useEffect(() => { //相当于componentDidMount
        dispatch!({ type: "product/getProductList" })
    }, [])
    let html;
    if (data.err) {
        html = <h1>{data.err}</h1>
    } else {
        html = (
            <fieldset>
                <legend>商品</legend>
                <h1>商品列表</h1>
                <ul>
                    {(data.productList as []).map((item: any): object => {
                        return (
                            <li key={item.id}>{item.title}</li>
                        )
                    })}
                </ul>
            </fieldset>
        )
    }
    return (
        <Spin size="large" spinning={loading}>
            {html}
        </Spin>
    )
}

// export default connect(prop=>({prop}))(Product)
export default connect(({ product, loading }: { product: stateType, loading: any }) => ({ data: product, loading: loading.models.product }))(Product)